<template>
	<view>
		<!-- <cu-custom bgColor="text-156" :isBack="true">
			<block slot="content">数据查询</block>
			<view slot="right" style="display: flex;">
				<view style="margin-right: 20upx;" @click="showDrawer">
					<uni-icons type="settings" size="20"></uni-icons>
				</view>
			</view>
		</cu-custom> -->
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">{{formData.realTimeStr}}</text>
			</view>
		</uni-nav-bar>
		<!-- <SearchTimeBar/> style="overflow: auto;height: calc(100vh - 380upx);margin-top: 10upx;"-->
		<view class="content padding" >
			<view class="page-content-list">
				<block v-for="(item, index) in formData.factorDtoList" :key="index">
					<view class="content-list-cell">
						<view class="order-item">
							<view class="order-item-header header-time">
								<view class="label">{{item.name}}</view>
							</view>
							<view class="order-item-content">
								<view class="order-content-row">
									<view class="label">平均值{{item.measurementUnitName}}</view><view class="value">{{item.avgVal||'->'}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">排放量{{item.measurementUnitName}}</view><view class="value">{{item.emissionsVal||'->'}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">最大值{{item.measurementUnitName}}</view><view class="value">{{item.maxVal||'->'}}</view>
								</view>
								<view class="order-content-row">
									<view class="label">最小值{{item.measurementUnitName}}</view><view class="value">{{item.minVal||'->'}}</view>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>
			<uni-load-more :status="status" :icon-size="16" :content-text="contentText" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				reload: false,
				pickFlag: true,
				column: [],
				last_id: '',
				status: 'loading',
				range: [],
				rangeKey: 'name',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				formData: {},
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('queryDetail', (res)=> {
				this.formData = res.data
			})
			this.status = ''
		},
		onPullDownRefresh() {
			this.last_id = '';
			this.listData =  []
			this.query.page = 1
			this.getList();
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},100)
		},
		onReachBottom() {
			this.status = 'more';
			this.query.page = this.query.page + 1
			this.getList(true);
		},
		methods: {
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.draw-panel{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 90upx);
		.operation-panel,.bottom-panel{
			padding: 40upx 20upx;
			.item-btn{
				width: 100%;
				position: relative;
				background-color: #156dac;
				color: #fff;
				text-align: center;
				height: 80upx;
				line-height: 80upx;
				border-radius: 10upx;
				margin-bottom: 20upx;
				&.lp{
					letter-spacing: 10upx;
				}
				&.green{
					background-color: #5eb00e;
					color: #fff;
				}
				&.white{
					background-color: #fff;
					color: #156dac;
					border: 1px solid #156DAC;
				}
				.font-icon{
					position: absolute;
					top: 15upx;
					left: 30upx;
					width: 50upx;
					text-align: center;
					border-radius: 50%;
					height: 50upx;
					line-height: 50upx;
					background-color: #156dac;
					color: #fff;
					&.active{
						background-color: #fff;
						color: #156dac;
					}
				}
				.icon{
					position: absolute;
					left: 30upx;
				}
			}
		}
		.left-panel{
			
		}
	}
	.page-content-list{
		position: relative;
		width: 100%;
		display: flex;
		flex-direction: column;
		.content-list-cell{
			position: relative;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}
	}
	.order-item{
		width: 750upx;
		background: #fff;
		padding: 20upx;
		border-radius: 20upx;
		margin-bottom: 20upx;
		.order-item-content{
			margin-top: 30upx;
			.order-content-row{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 26upx;
				margin-bottom: 30upx;
				.order-btn{
					display: inline-block;
					background-color: #156dac;
					color: #fff;
					width: 95upx;
					height: 50upx;
					line-height: 50upx;
					text-align: center;
					font-size: 24upx;
					padding: 0;
					margin-left: 10upx;
				}
				.label{
					// flex: 0 0 200upx;
					flex: 1;
					color: #156DAC;
					text-align: left;
					font-size: 26upx;
				}
				.value{
					flex: 1;
					color: #000;
					text-align: right;
					font-size: 26upx;
				}
			}
			
		}
			
		.order-item-header{
			display: flex;
			align-items: center;
			.icon{
				margin-right: 10upx;
			}
			text{
				color: #333;
				font-size: 28upx;
			}
		}
	}
</style>
